<template>
	<view class="container">
		
		<!-- 图片轮播——带右下角数量显示 -->
		<view class="advertisement" v-if="!activityDetail.video_url">
		  <swiper :autoplay="false" :interval="3000" :duration="1000" :circular="true" indicator-active-color="#00D075" indicator-color="#EDEEF0" :indicator-dots="true">
		    <swiper-item v-for="(item,index) in piclist" :key="index" @click="previewMedia(index)">
		      <image :src="$util.img(item)" mode="aspectFill" lazy-load></image>
		    </swiper-item>
		  </swiper>
		</view>
		<view class="goods-video" v-if="activityDetail.video_url">
			<video  id="goodsVideo" :src="$util.img(activityDetail.video_url)" :poster="$util.img(activityDetail.image)" objectFit="cover"></video>
		</view>
		
		<view class="goodsInfo fill-base m-b-20">
		  <view class="font-32 name">{{activityDetail.title}}</view>  
		  <view class="flex-y-center m-t-20">
		  	<i class="iconfont">&#xe6b1;</i>
		  	<text class="font-24 c-a4">{{activityDetail.view_num}}</text>
		  </view>
		</view>
		
		<view class="fill-base goodsInfo">
			<view class="font-32 text-bold">图文详情</view>
			<view class="goods-details" v-if="activityDetail.content">
				<rich-text :nodes="activityDetail.content" :data-nodes="activityDetail.content"></rich-text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import htmlParser from '@/common/js/html-parser';
	export default {
		data() {
			return {
				piclist: [],
				isIphoneX: false, //判断手机是否是iphoneX以上
				id: '',
				activityDetail: {},
			}
		},
		onLoad(data) {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
		  this.id = data.id;
		  this.getDetail();
		},
		methods: {
			previewMedia(index) {
				var paths = [];
				for (let i = 0; i < this.piclist.length; i++) {
					paths.push(this.$util.img(this.piclist[i]));
				}
				uni.previewImage({
					current: index,
					urls: paths,
				});
			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/socialize/classInfo",
			      data: {
			        class_id: this.id,
			      },
			      success: res => {
			        if(res.code == 0) {
			         this.activityDetail = res.data;
					 this.piclist = [res.data.image];
					 // 商品详情
					if (this.activityDetail.content) this.activityDetail.content = htmlParser(this.activityDetail.content);

					 uni.setNavigationBarTitle({
						title: this.activityDetail.title
					 })
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 160rpx;
}

// 轮播图
.advertisement {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  /deep/ swiper {
    height: 750rpx;
  }
  image {
    margin: 0 auto;
    width: 750rpx;
    height: 750rpx;
  }
}
.goodsInfo {
  padding: 30rpx 24rpx 20rpx;
  .name {
    line-height: 1.4;
  }
}

.iconfont  {
  	  font-size: 30rpx;
	  color: #A4A9B7;
	  margin-right: 10rpx;
  }
.goods-video {
	width: 750rpx;
	height: 750rpx;
}
.goods-video video {
	width: 100%;
	height: 100%;
}
</style>
